<template>
	<view class="opportunity">
		<view class="bar_top">
			<view class="search">
					<view class="search_input">
						<image src="/static/images/search.png" mode=""></image>
						<input type="text" placeholder="请输入关键词" v-model="search" />
						<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
					</view>
					<view class="search_btn" @tap="searchBtn()">搜索</view>
			</view>
			
			<view class="finance_bar">
					<view>查询范围：</view>
					<picker mode="selector" :range="statusList" @change="getPickerValue" :data-name="'statusIndex'" range-key="name">
						<view class="finance_bar_picker">
							<view>{{statusList[statusIndex].name}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<!-- <picker mode="selector" :range="departmentOrSelfList" @change="getPickerValue"  range-key="name"
					 :data-name="'departmentOrSelfListIndex'" >
						<view class="finance_bar_picker">
							<view>{{departmentOrSelfList[departmentOrSelfListIndex].name}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker> -->
 			</view>

			 <view class="finance_bar">
					<view>查询时间：</view>
					<picker mode="date" fields="day" @change="getStart">
						<view class="finance_bar_picker">
							<view>{{start == "" ? "请选择开始时间" : start}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<picker mode="date" fields="day" @change="getEnd">
						<view class="finance_bar_picker">
							<view>{{end}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
				</view>

			<!-- <view class="opportunity_more" >
				<view>我的商机客户</view>
				<view class="opportunity_more_icon" @tap="go('list')">
					<view>更多</view>
					<image src="/static/images/right.png" class="right"></image>
				</view>
			</view> -->
		</view>
 
		<view class="opportunity_list">
			<view class="opportunity_item" v-for="(item, index) in list" :key="index">
				<!-- <image class="opportunity_item_img" :src="item.avatar" @tap="go('info',item.id)"></image> -->
				<view class="opportunity_item_text" @tap="go('info',item.id)">
					<view class="opportunity_item_name">
						<view>{{item.name}}</view>
						<view>{{item.status == 0 ? '审核中' : ''}}</view>
					</view>
					<view>售后 上次联系：{{item.last_at}}</view>
				</view>
				<image src="/static/images/phone.png" class="opportunity_item_phone" @tap="makePhone(item.mobile)"></image>
			</view>
		</view>

		<view class="bottom_btn">
			<view class="bottom_btn_list">
				<view @tap="go('add')" v-if="checkPermission([20001])">添加商机客户</view>
			</view>
		</view>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	import Loading from "../../components/loading/loading.vue";
	export default {
		components: {
			Loading
		},
		data() {
			return {
				loading: true,
				page: 1,
				list: [], // 商户列表
				start:'',
				end:'',
				departmentOrSelfList: [{
						name: "自己",
						id: 1
					},
					{
						name: "本部门",
						id: 2
					},
				],
				departmentOrSelfListIndex: 0,
				statusList:[
					{
						name:'全部状态',
						id:-1
					},
					{
						name:'审核中',
						id:0
					},
					{
						name:'在保',
						id:1
					}],
				statusIndex:0,
				search:'',
				showEmptyBtn:false,
				
			}
		},onLoad(){
			this.departmentOrSelfListIndex=this.$store.getters.userInfo.branch_type != 1 ? 0 : 1;
			console.log("====?>>>>>",this.departmentOrSelfList);
			this.end = this.$api.getNowTime();

		},
		onShow() {
			if (this.$app.globalData.upData.product) {
				this.getData(1)
			}
		},
		onReachBottom() {
			if (this.loading) {
				this.getData(3)
			}
		},
		onUnload() {
			this.$app.globalData.upData.product = true
		},
		methods: {
			getStart(e) {
				this.start = e.detail.value;
				this.getData(1);
			},
			getEnd(e) {
				this.end = e.detail.value;
				if (this.start.length > 0) {
					this.getData(1);
				}
			},
			emptyValue(){
				this.search='';
				this.getData(1);
			},
			makePhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				})
			},
			getPickerValue(e) {
				this[e.currentTarget.dataset.name] = e.detail.value;
				this.getData(1);
			},
			getData(type) {
				this.$refs.load.initLoading({
					loadType: type
				}).then(res => {
					this.boxHide = false;
					this.$app.globalData.upData.order = false;

					// 员工级别
					let belong = this.$store.getters.userInfo.branch_type != 1 ? 1 : 2;

					// 参数
					let  upJson = {
						class: 2,
						belong:belong,
						user_id:uni.getStorageSync("userId"),
						page: 1
					}

					if (type == 1) {
						this.list = [], this.page = 1, this.loading = true
					} 
					if(this.statusIndex != 0){
						upJson.status = this.statusList[this.statusIndex].id
					}
					this.$api.getClientList(upJson).then(res => {
						this.$refs.load.getLoadingData({
							oldData: this.list,
							newData: res.data
						}).then(res => {
							this.loading = res.loading;
							this.list = res.list;
							this.page++;
						})
					})
				})
			},
			go(obj, id) { //页面跳转
				uni.navigateTo({
					url: "/pages/opportunity/" + obj + "/" + obj + "?id=" + id
				})
			},
			searchBtn() { //搜索
				this.getData(1);
			}
		},
		watch:{
			search(val){
				this.showEmptyBtn=val==""?false:true;
			}
		}
	}
</script>

<style>
	.opportunity {
		padding-bottom: 120upx;
	}

	.opportunity_more {
		width: 100%;
		height: 100upx;
		padding: 0 30upx;
		background: #FFFFFF;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 30upx;
		color: #333333;
	}

	.opportunity_more_icon {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #9BA7B7;
	}

	.opportunity_more_icon image {
		margin-left: 20upx;
	}

	.opportunity_list {
		margin-top: 260upx;
	}

	.opportunity_item {
		width: 710upx;
		padding: 20upx;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: 0 0 20upx 20upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.opportunity_item_img {
		width: 92upx;
		height: 92upx;
		border-radius: 50%;
		background: #EEEEEE;
	}

	.opportunity_item_text {
		flex-grow: 1;
		font-size: 24upx;
		color: #9BA7B7;
		margin: 0upx 20upx;
	}

	.opportunity_item_name {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10upx;
		font-size: 30upx;
		color: #000000;
	}

	.opportunity_item_name view:nth-child(2) {
		width: 120upx;
		line-height: 30upx;
		text-align: center;
		background: #FF801E;
		color: #FFFFFF;
		font-size: 24upx;
		margin-left: 10upx;
	}

	.opportunity_item_phone {
		width: 35upx;
		height: 40upx;
	}

	.finance_bar {
		width: 100%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #9BA7B7;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.finance_bar_picker {
		margin-right: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.finance_bar_picker image {
		width: 22upx;
		height: 10upx;
		margin-left: 10upx;
	}

	.finance_bar_btn {
		margin-left: auto;
		color: #333333;
	}
</style>
